<template>
  <div class="home" >
      <div class="lucky-wheel">
        <div class="lucky-title"></div>
        <div class="wheel-main">
            <div class="wheel-pointer" @click="rotate_handle()" ></div>
            <div class="wheel-bg" :style="{transform:rotate_angle,transition:rotate_transition} ">
                <div class="prize-list">
                <div class="prize-item" v-for="(item,index) in prize_list" :key="index">
                    <div class="prize-pic">
                        <img :src="item.icon" alt="">
                    </div>
                    <div class="prize-count" v-if="item.count">   {{item.count}}</div>
                    <div class="prize-type">  {{item.name}}</div>
                </div>
                </div>

            </div>


        </div>
   <div>{{toast_title}}</div>

      </div>



  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
    public  prize_list= [
        {
            icon: require("../assets/bean_500.png"), // 奖品图片
            count: 10, // 奖品数量
            name: "易趣豆", // 奖品名称
            isPrize: 1 // 该奖项是否为奖品
        },
        {
            icon: require("../assets/bean_five.png"),
            count: 5,
            name: "豆",
            isPrize: 1
        },
        {
            icon: require("../assets/bean_one.png"),
            count: 10,
            name: "易趣豆",
            isPrize: 1
        },
        {
            icon: require("../assets/point_five.png"),
            count: 5,
            name: "积分",
            isPrize: 1
        },
        {
            icon: require("../assets/point_ten.png"),
            count: 10,
            name: "积分",
            isPrize: 1
        },
        {
            icon: require("../assets/bean_500.png"),
            count: 10,
            name: "易趣豆",
            isPrize: 1
        },
        {
            icon: require("../assets/give_up.png"),
            count: 0,
            name: "未中奖",
            isPrize: 0
        },
        {
            icon: require("../assets/bean_500.png"),
            count: 10,
            name: "易趣豆",
            isPrize: 1
        }
        ]; //奖品列表
    public rotate_angle:string="rotate(" + -0 +"deg)";//将要旋转的角度
    public rotate_transition:string= "transform 5s ease-in-out";//初始化选中的过度属性控制
    public  click_flag:boolean=true; //是否可以旋转抽奖
    public  toast_control:boolean= false; //抽奖结果弹出框控制器
    public  hasPrize:boolean= false; //是否中奖
    public  index:number=1;
    public  start_rotating_degree:number=1; //初始旋转角度

    created(){
         // this.$store.dispatch('getAddress',{sort:1})
         this.init_prize_list()
      }
    rotate_handle() {
        this.index = Math.floor(Math.random() * 7) //指定每次旋转到的奖品下标

        this.rotating();
    };
    //此方法为处理奖品数据
    init_prize_list() {};
    rotating(){
     if (!this.click_flag) return;
        var type = 0; // 默认为 0  转盘转动 1 箭头和转盘都转动(暂且遗留)
        var during_time = 5; // 默认为1s
        var result_index = this.index ; // 最终要旋转到哪一块，对应prize_list的下标
        var result_angle = [337.5, 292.5, 247.5, 202.5, 157.5, 112.5, 67.5, 22.5]; //最终会旋转到下标的位置所需要的度数
        var rand_circle=6;
        this.rotate_angle="rotate(" +  +"deg)";
        if(type == 0){
            var rotate_angle =
                this.start_rotating_degree
                + rand_circle * 360
                + result_angle[result_index] -
                this.start_rotating_degree % 360;
             this.start_rotating_degree = rotate_angle;
            this.rotate_angle = "rotate(" + rotate_angle + "deg)";
            // 旋转结束后，允许再次触发
            var that = this;
            setTimeout(function() {
                that.click_flag = true;
                that.game_over();
            }, during_time * 1000 + 1500); // 延时，保证转盘转完
        }
        else{

        }
    }
    game_over() {
  //       this.toast_control = true;
  //       this.hasPrize = this.prize_list[this.index].isPrize
    };
  // get toast_title(){
  //     return this.hasPrize
  // }

}
</script>
<style scoped lang="scss">
  .lucky-wheel{
      width: 100%;
      height:500px;
      background: rgb(252, 207, 133) url('../assets/color_pillar.png') no-repeat center bottom;
      background-size: 100%;
      padding-top: 30px;
  }
  .lucky-title {
      width: 100%;
      height: 130px;
      background: url('../assets/lucky_title.png') no-repeat center top;
      background-size: 100%;
  }
  .wheel-main{
      width: 100%;
      display: flex;
      align-self: center;
      justify-content: center;
      position: relative;
  }
  .wheel-bg{
        width: 330px;
        height:330px;
        background: url("../assets/draw_wheel.png") no-repeat center top;
        background-size: 100%;
        color: #fff;
        font-weight: 500;
        display: flex;
      justify-content: center;


    }
  .wheel-pointer{
        width: 80px;
        height: 80px;
        background: url('../assets/draw_btn.png') no-repeat center top;
        background-size: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        z-index: 10;
      }
  .prize-list {
      width: 100%;
      height: 100%;
      position: relative;
  }
  .prize-list .prize-item {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
  }
  .prize-list .prize-item:first-child {
      top: 30px;
      left: 155px;
      transform: rotate(20deg);
  }
   .prize-list .prize-item:nth-child(2) {
      top: 70px;
      left: 200px;
      transform: rotate(67deg);
  }
  .prize-list .prize-item:nth-child(3) {
      top: 130px;
      left: 200px;
      transform: rotate(-250deg);
  }
  .prize-list .prize-item:nth-child(4) {
      top: 177px;
      left: 155px;
      transform: rotate(-210deg);
  }
  .prize-list .prize-item:nth-child(5) {
      top: 175px;
      left: 95px;

      transform: rotate(-160deg);
  }
  .prize-list .prize-item:nth-child(6) {
      top: 130px;
      left: 50px;

      transform: rotate(-111deg);
  }
  .prize-list .prize-item:nth-child(7) {
      top: 75px;
      left: 65px;

      transform: rotate(-69deg);
  }
  .prize-list .prize-item:nth-child(8) {
      top: 30px;
      left: 95px;
      transform: rotate(-20deg);
  }
  .prize-item {
      width: 80px;
      height: 130px;
      text-align: center;
      font-size: 1px;
  }
  .prize-item img{
      width: 80px;
      height: 50px;
  }





</style>
